<template>
  <el-dialog
    title="表单校验"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :fullscreen="true"
    width="70%"
    :before-close="handleClose"
  >
    <div>
      <div v-if="!file && !tableList.length">
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :before-upload="beforeUpload"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChange"
          accept=".xlsx, .xls"
        >
          <i class="el-icon-upload"></i>
          <div div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>
      </div>
      <div v-else>
        <el-alert v-if="tableList.length === 0" title="无错误数据，可以进行上传！" type="success" :closable="false"> </el-alert>
        <el-alert v-if="tableList.length > 0" title="请先处理错误行的数据！" type="error" :closable="false"> </el-alert>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column
            width="50"
            prop="index"
            label="行号"
          ></el-table-column>
          <el-table-column prop="idCard" label="身份证号">
            <template slot-scope="scope">
              <p :style="{ color: scope.row.idCardError ? 'red' : '' }">
                {{ scope.row.idCard }}
              </p>
              <p v-if="scope.row.idCardError">
                <el-tag type="danger">{{ scope.row.idCardError }}</el-tag>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名">
            <template slot-scope="scope">
              <p :style="{ color: scope.row.nameError ? 'red' : '' }">
                {{ scope.row.name }}
              </p>
              <p v-if="scope.row.nameError">
                <el-tag type="danger">{{ scope.row.nameError }}</el-tag>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <p :style="{ color: scope.row.sexError ? 'red' : '' }">
                {{ scope.row.sex }}
              </p>
              <p v-if="scope.row.sexError">
                <el-tag type="danger">{{ scope.row.sexError }}</el-tag>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="账号">
            <template slot-scope="scope">
              <p :style="{ color: scope.row.phoneError ? 'red' : '' }">
                {{ scope.row.phone }}
              </p>
              <p v-if="scope.row.phoneError">
                <el-tag type="danger">{{ scope.row.phoneError }}</el-tag>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="工时">
            <template slot-scope="scope">
              <p :style="{ color: scope.row.timeError ? 'red' : '' }">
                {{ scope.row.time }}
              </p>
              <p v-if="scope.row.timeError">
                <el-tag type="danger">{{ scope.row.timeError }}</el-tag>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="积分">
            <template slot-scope="scope">
              <p :style="{ color: scope.row.integralError ? 'red' : '' }">
                {{ scope.row.integral }}
              </p>
              <p v-if="scope.row.integralError">
                <el-tag type="danger">{{ scope.row.integralError }}</el-tag>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handlCancel">关闭</el-button>
      <el-button
        type="primary"
        v-if="file && !tableList.length"
        :loading="loading"
        @click="handleSure"
      >上传</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { getExcelData } from '../../../utils/excel-uitls.ts'
const formatSheetBase = list => {
  return Object.values(list).map(n => {
    return {
      idCard: n[1] && n[1].v, // 订单编号
      name: n[2] && n[2].v, // 下单时间
      sex: n[3] && n[3].v, // 预交货时间
      phone: n[4] && n[4].v, // 公司名称
      time: n[5] && n[5].v, // 联系人
      integral: n[6] && n[6].v, // 收获地址
      team: n[7] && n[7].v,
      teamId: n[8] && n[8].v
    }
  })
}

const verification = list => {
  return list.map((n, i) => {
    if (i === 0) return n
    const obj = {
      ...n,
      index: i + 1,
      idCardError: idCard(n.idCard),
      phoneError: phone(n.phone),
      nameError: name(n.name),
      sexError: sex(n.sex),
      timeError: time(n.time),
      integralError: integral(n.integral)
      // teamError: team(n.team),
      // teamIdError: teamId(n.teamId),
    }
    if (
      obj.idCardError ||
      obj.phoneError ||
      obj.nameError ||
      obj.sexError ||
      obj.timeError ||
      obj.integralError
    ) {
      obj.hasError = true
    }
    return obj
    function time (data) {
      if (isNaN(data)) return '格式不正确'
      return
    }

    function integral (data) {
      if (isNaN(data)) return '格式不正确'
      return
    }

    // function team(data){
    //   if(!data) return '所属团队不能为空'
    //   return
    // }

    function phone (data) {
      if (!data) return '不能为空'
      return
    }

    function name (data) {
      if (!data) return '不能为空'
      return
    }

    function sex (data) {
      if (!data) return '不能为空'
      if (!/^[男|女]$/.test(data)) return '格式不正确'
      return
    }

    function idCard (data) {
      if (!data) return '不能为空'
      if (data.length !== 18) return '格式不正确'
      // !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
      //   data
      // )
      return
    }
  })
}

export default {
  name: 'excelModal',
  data () {
    return {
      loading:false,
      dialogVisible: false,
      excelList: [],
      tableList: [],
      file: undefined,
      allSheetsData:[]
    }
  },
  methods: {
    open () {
      this.dialogVisible = true
    },
    handleClose (done) {
      this.handleClear()
      done()
    },
    handlCancel () {
      this.handleClear()
      this.dialogVisible = false
    },
    handleClear () {
      this.tableList = []
      this.file = undefined
      this.loading = false
    },
    handleSure () {
      if(this.loading === true) return
      this.loading = true
      this.$emit('sure', this.allSheetsData)
    },
    async handleChange (file) {
      try {
        const result = await getExcelData(file.raw)
        // 获取excel的数据
        const allSheetsData = result.map(n => {
          const SheetBase = formatSheetBase(n)
          return SheetBase
        })

        // 校验数据 目前都在一个sheet中
        const errorList = verification(allSheetsData[0])
        const errorListHasError = errorList.filter(n => n.hasError)
        this.tableList = errorListHasError
        this.excelList = errorList
        this.file = file.raw
        this.allSheetsData = allSheetsData[0]
        return false
      } catch (e) {
        return false
      }
    },
    async beforeUpload (file) {
    }
  }
}
</script>
<style lang="less" scoped>
.upload-demo {
  width: 100%;
}
.upload-demo /deep/ .el-upload {
  width: 100%;
}
.upload-demo /deep/ .el-upload-dragger {
  width: 100%;
}
</style>
